<template>
  <div class="edit-price-warpper">
    <el-form
      ref="ruleform"
      :inline="true"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-form-item label="修改范围：" label-width="84">
          <el-radio-group v-model="form.range_type" v-removeAriaHidden>
            <el-radio v-for="item in pageInfo.rangeTypeArr" :key="item.value" :label="item.value" :class="item.value === 1 ? 'editTypeTwo' : ''">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row class="radio-block">
        <el-form-item label="修改方式：" label-width="84">
          <el-radio-group v-model="form.edit_type" v-removeAriaHidden>
            <el-radio v-for="item in pageInfo.editTypeArr" :key="item.value" :label="item.value" :class="item.value === 1 ? 'editTypeTwo' : ''">
              {{ item.label }}
              <el-input v-if="item.value === 0" v-model="form.new_price" size="mini" placeholder="请输入" style="width: 100px; margin: 0 8px;" />
              <div v-if="item.value === 1" style="display: inline-block; color: #000;">
                <span>原价 x</span>
                <el-input v-model="form.price_multiple" size="mini" placeholder="请输入" style="width: 100px; margin: 0 8px;" />
                <span>倍 +</span>
                <el-input v-model="form.price_add" size="mini" placeholder="请输入" style="width: 100px; margin: 0 8px;" />
              </div>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row class="radio-block">
        <el-form-item label="尾数修改：" label-width="84">
          <el-radio-group v-model="form.decimal_type" v-removeAriaHidden>
            <el-radio v-for="item in pageInfo.decimalTypeeArr" :key="item.value" :label="item.value" :class="item.value === 1 ? 'editTypeTwo' : ''">
              {{ item.label }}
              <div v-if="item.value === 0" style="display: inline-block; color: #000;">
                <el-input v-model="form.decimal_count" size="mini" placeholder="请输入" style="width: 100px; margin: 0 8px;" />
                <span>位 （采用四舍五入）</span>
              </div>
              <el-input v-if="item.value === 1" v-model="form.new_decimal" size="mini" placeholder="请输入" style="width: 100px; margin: 0 8px 0 22px;" />
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageInfo: {
        rangeTypeArr: [
          {
            label: '全部SKU',
            value: 0
          },
          {
            label: 'SKU最低价',
            value: 1
          },
          {
            label: 'SKU最高价',
            value: 2
          }
        ],
        editTypeArr: [
          {
            label: '统一价格',
            value: 0
          },
          {
            label: '公式修改',
            value: 1
          }
        ],
        decimalTypeeArr: [
          {
            label: '保留小数点',
            value: 0
          },
          {
            label: '统一改为',
            value: 1
          }
        ]
      },
      form: {
        range_type: 0,
        edit_type: 0,
        new_price: '',
        price_multiple: '',
        price_add: '',
        decimal_type: 0,
        decimal_count: '',
        new_decimal: ''
      },
      rules: {}
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  line-height: 17px;
}
.edit-price-warpper {
  .radio-block {
    ::v-deep {
      .el-radio {
        display: block;
        margin-top: 12px;
        &:first-of-type {
          margin-top: 4px;
        }
      }
    }
  }
}
</style>
